<template>
  <el-card shadow="hover" style="height: 100%;" :body-style="{height:'100%'}">
    <template #header>
      <a href="/admin/excel/一件代发订单Excel模板.xlsx" download>文件下载</a>
    </template>
    <div class="overflow-auto h-[600px]">
      <el-timeline>
        <el-timeline-item v-show="item.name !== 'template'" :timestamp="item.size + '字节'" v-for="item in fileList" :key="item.name">
          <el-link type="primary" @click="handleDownload(item.name)">{{ item.name }}</el-link>
            <el-progress :percentage="progress[item.name]" />
          <el-link type="danger" @click="handleDelete(item.name)">删除</el-link>
        </el-timeline-item>
      </el-timeline>
    </div>
  </el-card>
</template>

<script setup lang="ts" name="image-download">
import { getDownload, getFileListApi, getFileDeleteApi, getMergeFileApi } from "@/api/file";

let fileList = shallowRef([])
getFileListApi().then(res => {
  fileList.value = res.fileList
})

let progress = reactive<{template:number}>({
  template:0,
})
const handleDownload = async name => {
  await getDownload(name,(current => {
    progress[name] = current
  }))
}

const handleDelete = async (name:string) => {
  await getFileDeleteApi(name)
  getFileListApi().then(res => {
    fileList.value = res.fileList
  })
}
</script>

<style scoped lang="less">

</style>
